<template>
  <div>
    <a-drawer title="审核记录" :maskClosable="true" :width="800" placement="right" :closable="true" @close="closeMask" :visible="visible" style="height: 100%; overflow: auto; padding-bottom: 53px">
      <div style="margin-left: 24px; font-size: 14px; font-weight: 700">审核记录</div>
      <a-divider />
      <div style="overflow-y: auto">
        <div v-for="(item, index) in themeApprovalLogVos" :key="index" style="padding: 12px 36px">
          <div style="display: flex; padding-left: 12px">
            <div class="written" style="min-width: 150px; font-weight: 600; color: #000000d9">{{ item.approvalNodeName }}</div>
            <div style="flex: 1">
              <div class="list">
                <div class="written">
                  <span> 编号：</span>
                  <span>{{ item.submissionCode }}</span>
                </div>
                <div class="written current">
                  <span> 审核人：</span>
                  <span>{{ item.approvalUser }}</span>
                </div>
                <div class="written">
                  <span> 操作时间：</span>
                  <span>{{ item.createTime }}</span>
                </div>
              </div>
              <div class="written" v-if="item.reason">
                <template v-if="item.approvalStatus == 4">
                  <span> 驳回理由：</span>
                  <span>{{ item.reason }}</span>
                </template>
                <template v-else-if="item.approvalStatus == 100">
                  <span class="written"> 待确认信息：</span>
                  {{ item.reason }}
                  <a class="confirmBtn" @click="reply(item)" v-if="item.canReply">回复</a>
                </template>
                <template v-else-if="item.approvalStatus == 101">
                  <span class="written"> 回复信息：</span>
                  {{ item.reason }}
                  <a class="confirmBtn" @click="reply(item)" v-if="item.canReply">修改回复</a>
                </template>
                <template v-else-if="item.approvalStatus == 3">
                  <template v-if="item.approvalNode == 10 || item.approvalNode == 11">
                    <span> 说明：</span>
                    <span>{{ item.reason }}</span>
                  </template>
                </template>
              </div>
            </div>
          </div>
          <a-divider />
        </div>
      </div>
      <a-button type="primary" class="closebtn" @click="closeMask">关闭</a-button>
    </a-drawer>
    <a-drawer
      title="请输入确认信息"
      :maskClosable="true"
      :width="800"
      placement="right"
      :closable="true"
      @close="visibleConfirm = false"
      :visible="visibleConfirm"
      style="height: 100%; overflow: auto; padding-bottom: 80px"
    >
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
        <a-form-item label="确认信息" required>
          <a-textarea v-model="confirmContent" placeholder="最多120字" :maxLength="120" style="height: 200px" />
        </a-form-item>
      </a-form>
      <div class="drawer-btn">
        <a-button style="margin-right: 8px" @click="visibleConfirm = false">取消</a-button>
        <a-button type="primary" @click="handleConfirm">确定</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { recordList, confirmReply } from '@/api/pos/authority'
import { number, string } from 'mathjs'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
export default {
  name: 'UserModal',
  props: {
    themeId: {
      type: Number
    }
  },
  data() {
    return {
      visible: true,
      themeApprovalLogVos: [],
      confirmContent: '',
      status: '',
      visibleConfirm: false,
      userInfo: Vue.ls.get(USER_INFO)
    }
  },
  mounted() {
    console.log('-----', this.$store.getters.userInfo)
    this._conditionDetail()
  },
  methods: {
    reply(val) {
      this.visibleConfirm = true
      this.status = val.approvalStatus
      this.approvalNode = val.approvalNode
      this.submissionId = val.submissionId
      if (val.approvalStatus == 101) {
        this.confirmContent = val.reason
      } else {
        this.confirmContent = ''
      }
    },
    closeMask() {
      this.$emit('closeRecord')
    },
    // 详情
    _conditionDetail() {
      recordList(this.themeId).then(res => {
        if (res.code == 200) {
          this.themeApprovalLogVos = res.data
        }
      })
    },
    // 创建者确认——提交确认信息
    handleConfirm() {
      console.log('----', this.confirmContent)
      if (!this.confirmContent.trim()) {
        this.$message.warning('请输入确认信息')
        return
      }
      let data = {
        confirmMsg: this.confirmContent,
        approvalUsername: this.$store.getters.userInfo.realname,
        id: this.submissionId,
        workNo: this.$store.getters.userInfo.workNo
      }
      confirmReply(data).then(res => {
        this.confirmContent = ''
        if (res.code == 200) {
          this.visibleConfirm = false
          if (this.status == 100) {
            this.$message.success('编辑成功')
          } else {
            this.$message.success('修改成功')
          }
          this._conditionDetail()
          this.$emit('updateTable')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.list {
  justify-content: space-between;
  display: flex;
}
.written {
  margin-bottom: 24px;
}
.written > span:nth-child(1) {
  font-weight: 600;
  color: #000000d9;
}
.written > span:nth-child(2) {
  font-weight: 500;
  color: #666;
}
.closebtn {
  position: absolute;
  bottom: 30px;
  right: 30px;
}
.confirmBtn {
  font-weight: 600;
  text-decoration: underline;
  margin-left: 10px;
}
.drawer-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
</style>
